<template>
	<basic-container>
		<avue-crud
			:option="option"
			:data="data"
			ref="crud"
			v-model="form"
			:table-loading="loading"
			:permission="permissionList"
			@row-del="rowDel"
			@row-update="rowUpdate"
			@row-save="rowSave"
			:page="page"
			@refresh-change="refreshChange"
			@search-change="searchChange"
			@search-reset="searchReset"
			@current-change="currentChange"
			@size-change="sizeChange"
			@on-load="onLoad"
		>
			<!-- 新增按钮  -->
			<template slot="menuLeft">
				<el-button type="primary" size="mini" @click="openDialogVisible" v-has="'/mall-cloud-advert/posterPos/addItem'">+ 新增</el-button>
			</template>
			<!-- 编辑按钮  -->
			<template slot-scope="scope" slot="menu">
				<el-button icon="el-icon-edit" type="text" size="small" @click="edit(scope.row)" v-has="'/mall-cloud-advert/posterPos/list'">编辑</el-button>
				<el-button v-if="scope.row.apSysType == 0" icon="el-icon-edit" type="text" size="small" @click="rowDel(scope.row)" v-has="'/mall-cloud-advert/posterPos/delete'">
					删除
				</el-button>
<!--				<el-button type="text" icon="el-icon-plus" size="small" @click="upLadders(scope.row)" v-has="'/mall-cloud-advert/posterPos/listManage'">设置档位</el-button>-->
<!--				<el-button type="text" size="mini" @click="biddingRanking(scope.row)" v-has="'/mall-cloud-advert/poster/listPoster'">竞价排行</el-button>-->
			</template>
		</avue-crud>
		<!-- 新增按钮弹框 -->
		<el-dialog title="新增广告位" :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%" @closed="closedRecurseData('addForm')">
			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="160px" class="demo-ruleForm">
				<el-form-item label="广告位标题" prop="apTitle" style="width: 50%;display: inline-block;">
					<el-input v-model="addForm.apTitle" placeholder="请输入广告位名称"></el-input>
				</el-form-item>
				<el-form-item label="广告位类别" prop="apType" style="width: 50%;display: inline-block;">
					<el-tooltip class="item" effect="dark" content="选择此广告位广告的形式" placement="top">
						<el-select v-model="addForm.apType" placeholder="请选择广告位类别" style="width: 100%;">
							<el-option v-for="(item,index) in adType" :key="index" :label="item.label" :value="item.value"></el-option>
<!--							<el-option label="幻灯" value="slide"></el-option>-->
						</el-select>
					</el-tooltip>
				</el-form-item>
				<el-form-item label="广告位展示方式" v-if="addForm.apType == 'slide'" prop="apShowType" class="showType" style="width: 50%;display: inline-block;">
					<el-select v-model="addForm.apShowType" placeholder="请选择广告位类别" style="width: 100%;">
						<el-option label="随机" value="1"></el-option>
						<el-option label="所有" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="广告位宽度" prop="apWidth" style="width: 50%;display: inline-block;">
					<el-input v-model="addForm.apWidth" @blur="setContent(0)" placeholder="请输入广告位宽度"></el-input>
				</el-form-item>
				<el-form-item label="广告位高度" prop="apHeight" style="width: 50%;display: inline-block;">
					<el-input v-model="addForm.apHeight" @blur="setContent(0)" placeholder="请输入广告位高度"></el-input>
				</el-form-item>
<!--				<el-form-item label="广告位价格" prop="apPrice" style="width: 50%;display: inline-block;">-->
<!--					<el-tooltip class="item" effect="dark" content="￥/次" placement="top"><el-input v-model="addForm.apPrice"></el-input></el-tooltip>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="广告位默认链接" prop="apClickUrl" style="width: 50%;display: inline-block;">-->
<!--					<el-input v-model="addForm.apClickUrl" placeholder="请输入广告位默认链接"></el-input>-->
<!--				</el-form-item>-->
				<!--<el-form-item label="系统广告" prop="apSysType" style="width: 50%;display: inline-block;" >-->
				<!--<el-tooltip class="item" effect="dark" content="系统广告不可删除，主要处理商城预留广告位" placement="top">-->
				<!--<el-radio-group v-model="addForm.apSysType">-->
				<!--<el-radio label="1">是</el-radio>-->
				<!--<el-radio label="0">否</el-radio>-->
				<!--</el-radio-group>-->
				<!--</el-tooltip>-->
				<!--</el-form-item>-->
				<el-form-item label="是否启用" prop="apStatus" style="width: 50%;display: inline-block;">
					<el-radio-group v-model="addForm.apStatus">
						<el-radio label="1">启用</el-radio>
						<el-radio label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="标记" prop="mark" style="width: 50%;display: inline-block;">
					<el-radio-group v-model="addForm.mark">
<!--						<el-radio label="1">电脑</el-radio>-->
						<el-radio label="2">手机</el-radio>
					</el-radio-group>
				</el-form-item>
				<!--<el-form-item label="商品分类" v-if="addForm.mark==2" prop="goodsClassId" style="width: 50%;display: inline-block;" >
          <el-cascader
                  v-model="productData"
                  :options="goodsClassoptions"
                  @change="handleChange">
          </el-cascader>
        </el-form-item>-->
<!--				<el-form-item label="是否可以售卖" prop="isSell" style="width: 50%;display: inline-block;">-->
<!--					<el-radio-group v-model="addForm.isSell">-->
<!--						<el-radio label="1">可以</el-radio>-->
<!--						<el-radio label="0">不可以</el-radio>-->
<!--					</el-radio-group>-->
<!--				</el-form-item>-->
				<el-form-item label="广告位描述" prop="apContent">
					<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addForm.apContent"></el-input>
				</el-form-item>
				<el-form-item label="广告位默认图片链接" >
					<el-tooltip class="item" effect="dark" :content="content" placement="top">
						<div class="apAccUrl">
							<el-col style="width: calc(100% - 160px);">
								<el-form-item prop="apAccUrl">
									<el-input v-model="addForm.apAccUrl" readonly @focus="apAccurlOpen('0', '0')" placeholder="请选择广告位默认图片链接"></el-input>
								</el-form-item>
							</el-col>
							<el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
								<div class="demo-image__preview">
									<el-image :src="addForm.apAccUrl" width="20" height="20" :preview-src-list="[addForm.apAccUrl]">
										<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
									</el-image>
								</div>
							</el-col>
							<el-col style="width: 90px;margin-left: 15px;">
								<el-form-item><el-button icon="el-icon-search" type="primary" @click="apAccurlOpen('0', '0')">预览</el-button></el-form-item>
							</el-col>
						</div>
					</el-tooltip>
				</el-form-item>
<!--				<el-form-item label="广告位预览图片链接" prop="previewImgUrl">-->
<!--					&lt;!&ndash; <el-tooltip class="item" effect="dark" :disabled="false"  placement="top"> &ndash;&gt;-->
<!--					<div class="previewImgUrl">-->
<!--						<el-col style="width: calc(100% - 160px);">-->
<!--							<el-form-item>-->
<!--								<el-input v-model="addForm.previewImgUrl" readonly @focus="previewOpen('1', '0')" placeholder="请选择广告位预览图片链接"></el-input>-->
<!--							</el-form-item>-->
<!--						</el-col>-->
<!--						<el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">-->
<!--							<div class="demo-image__preview">-->
<!--								<el-image :src="addForm.previewImgUrl" width="40" height="40" :preview-src-list="srcList">-->
<!--									<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>-->
<!--								</el-image>-->
<!--							</div>-->
<!--						</el-col>-->
<!--						<el-col style="width: 90px;margin-left: 15px;">-->
<!--							<el-form-item><el-button icon="el-icon-search" type="primary" @click="previewOpen('1', '0')">预览</el-button></el-form-item>-->
<!--						</el-col>-->
<!--					</div>-->
<!--					&lt;!&ndash; </el-tooltip> &ndash;&gt;-->
<!--				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addRecurseData('addForm')" :loading="addLoad" v-has="'/mall-cloud-advert/posterPos/editItem'">提 交</el-button>
				<el-button @click="closedRecurseData('addForm')">取 消</el-button>
			</span>
			<selFile
				ref="selFile"
				@callback="selFileCallBack"
				albumCode="pic_root"
				dialogTitle="选择广告位图片"
				selectType="radio"
				selMaxWidth="300px"
				selMaxHeight="300px"
			></selFile>
		</el-dialog>
		<!-- 编辑按钮弹框 -->
		<el-dialog title="编辑广告位" :close-on-click-modal="false" :visible.sync="editVisible" ref="editVisible" width="60%" @closed="editCloseDialog('editForm')">
			<el-form :model="editForm" :rules="rules" ref="editForm" label-width="160px" class="demo-ruleForm">
				<el-form-item label="广告位标题" prop="apTitle" style="width: 50%;display: inline-block;">
					<el-input v-model="editForm.apTitle" placeholder="请输入广告位名称"></el-input>
				</el-form-item>
				<el-form-item label="广告位类别" prop="apType" style="width: 50%;display: inline-block;">
					<el-tooltip class="item" effect="dark" content="选择此广告位广告的形式" placement="top">
						<el-select v-model="editForm.apType" placeholder="请选择广告位类别" style="width: 100%;">
							<el-option v-for="(item,index) in adType" :key="index" :label="item.label" :value="item.value"></el-option>
<!--							<el-option label="图片" value="img"></el-option>-->
<!--							<el-option label="幻灯" value="slide"></el-option>-->
						</el-select>
					</el-tooltip>
				</el-form-item>
				<el-form-item label="广告位展示方式" v-if="editForm.apType == 'slide'" prop="apShowType" class="showType" style="width: 50%;display: inline-block;">
					<el-select v-model="editForm.apShowType" placeholder="请选择广告位类别" style="width: 100%;">
						<el-option label="随机" value="1"></el-option>
						<el-option label="所有" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="广告位宽度" prop="apWidth" style="width: 50%;display: inline-block;">
					<el-input v-model="editForm.apWidth" @blur="setContent(1)" placeholder="请输入广告位宽度"></el-input>
				</el-form-item>
				<el-form-item label="广告位高度" prop="apHeight" style="width: 50%;display: inline-block;">
					<el-input v-model="editForm.apHeight" @blur="setContent(1)" placeholder="请输入广告位高度"></el-input>
				</el-form-item>
				<el-form-item label="是否启用" prop="apStatus" style="width: 50%;display: inline-block;">
					<el-radio-group v-model="editForm.apStatus">
						<el-radio label="1">开启</el-radio>
						<el-radio label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="标记" prop="mark" style="width: 50%;display: inline-block;">
					<el-radio-group v-model="editForm.mark">
<!--						<el-radio label="1">电脑</el-radio>-->
						<el-radio label="2">手机</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="广告位描述" prop="apContent">
					<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="editForm.apContent"></el-input>
				</el-form-item>
				<el-form-item label="广告位默认图片链接" >
					<el-tooltip class="item" effect="dark" :content="content" placement="top">
						<div class="apAccUrl">
							<el-col style="width: calc(100% - 160px);">
								<el-form-item prop="apAccUrl"> 
									<el-input v-model="editForm.apAccUrl" readonly @focus="apAccurlOpen('0', '1')" placeholder="请选择广告位默认图片链接"></el-input>
								</el-form-item>
							</el-col>
							<el-col style="width: 40px;height: 40px;overflow: hidden;margin-left: 15px;background: #f5f6f7;text-align: center;">
								<div class="demo-image__preview">
									<el-image :src="editForm.apAccUrl" width="40" height="40" :preview-src-list="[editForm.apAccUrl]">
										<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
									</el-image>
								</div>
							</el-col>
							<el-col style="width: 90px;margin-left: 15px;">
								<el-form-item><el-button icon="el-icon-search" type="primary" @click="apAccurlOpen('0', '1')">预览</el-button></el-form-item>
							</el-col>
						</div>
					</el-tooltip>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editRecurseData('editForm')" :loading="editLoad">提 交</el-button>
				<el-button @click="editCloseDialog('editForm')">取 消</el-button>
			</span>
			<selFile
				ref="selFile"
				@callback="selFileCallBack"
				albumCode="pic_root"
				dialogTitle="选择广告位图片"
				selectType="radio"
				selMaxWidth="300px"
				selMaxHeight="300px"
			></selFile>
		</el-dialog>
		<!-- 设置档位弹框 -->
		<el-dialog title="设置档位" :visible.sync="ladderVisible" width="60%" @closed="ladderClose">
			<avue-crud ref="crud" :option="ladderOption" :data="ladderData" @row-update="addUpdate" @row-del="delBtn"></avue-crud>
			<div style="overflow: hidden;margin-top: 10px;">
				<div style="float: right;">
					<el-button @click="ladderClose" size="small">取消</el-button>
					<el-button type="primary" size="small" @click="setGearPosition" :loading="ladderLoad">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog width="50%" title="竞价列表" :visible.sync="innerVisible">
			<!--				表格-->
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="adTitle" label="广告名"></el-table-column>
				<el-table-column prop="adPrice" label="价格/元"></el-table-column>
				<el-table-column prop="probability" label="概率"></el-table-column>
			</el-table>
		</el-dialog>
	</basic-container>
</template>

<script>
import selFile from '@/components/file/selFile';
import uploadPic from '@/components/file/uploadPic';
import { getList, getEditDetail, getClassList, remove, update, add, setUpLadders, getLadders, getlistPoster } from '@/api/base/operations/advertManage/advPos';
import { mapGetters } from 'vuex';
import { bannerDescribe } from '@/util/rej';

import { testSort, testPirce, testUrl, testAccountName,jsEncode ,validateSpecial} from '@/util/util';
var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
console.log('Dict',Dict)
var ADTYPE = Dict.ADV_POS_TYPE
export default {
	data() {
		return {
			adType:ADTYPE,
			ladderLoad: false,
			editLoad: false,
			addLoad: false,
			pID: '',
			type: '',
			probabilityArr: [],
			ladderData: [],
			innerVisible: false,
			tableData: [],
			dialogVisible: false,
			editVisible: false,
			ladderVisible: false,
			content: '最佳尺寸：px*px',
			//设置档位
			ladderOption: {
				keyId: 'id',
				addBtn: false,
				editBtn: false,
				addRowBtn: true,
				cellBtn: false,
				column: [
					{
						label: '概率',
						prop: 'probability',
						cell: true,
						type: 'number',
						rules: [
							{
								required: true,
								message: '请输入档位',
								trigger: 'blur',
								type: 'number'
							},
							{
								min: 1,
								message: '概率最小值1',
								trigger: 'blur',
								type: 'number'
							},
							{
								max: 100,
								message: '概率最大值100',
								trigger: 'blur',
								type: 'number'
							}
						]
					},
					{
						label: '档位',
						prop: 'ladder',
						cell: true,
						type: 'number',
						rules: [
							{
								required: true,
								message: '请输入档位',
								trigger: 'blur',
								type: 'number'
							},
							{
								min: 1,
								message: '档位最小值1',
								trigger: 'blur',
								type: 'number'
							}
						]
					}
				]
			},
			addLadderForm: {
				apId: '',
				probability: '',
				ladder: ''
			},
			ladderRules: {
				apId: [
					{
						required: true,
						message: '广告位价格不能为空',
						trigger: 'blur'
					}
				]
			},
			urlClass: 0, //默认图片0  预览图片1
			editOrAdd: 0, //新增广告位0 或编辑广告位1 预览图片
			//新增广告内容
			addForm: {
				apTitle: '',
				apContent: '',
				apType: '',
				apPrice: '',
				apSysType: '0',
				apStatus: '',
				apShowType: '',
				mark: '',
				apWidth: '',
				apHeight: '',
				apAccUrl: '',
				classData: this.productLastdata,
				previewImgUrl: '',
				apClickUrl: '',
				isSell: ''
			},
			rules: {
				apTitle: [
					{
						required: true,
						validator: testAccountName,
						trigger: 'change'
					}
				],
				apContent: [
					{
						required: true,
						// message: "广告位简介不能为空",
						validator: bannerDescribe,
						trigger: 'change'
					},{
					validator:validateSpecial,
						trigger:'blur'
					}
				],
				apPrice: [
					{
						required: true,
						message: '广告位价格不能为空',
						trigger: 'blur'
					},
					{
						validator: testPirce,
						trigger: 'blur'
					}
				],
				apWidth: [
					{
						required: true,
						message: '广告位宽度不能为空',
						trigger: 'blur'
					},
					{
						validator: testSort,
						trigger: 'blur'
					}
				],
				apHeight: [
					{
						required: true,
						message: '广告位高度不能为空',
						trigger: 'blur'
					},
					{
						validator: testSort,
						trigger: 'blur'
					}
				],
				apType: [
					{
						required: true,
						message: '请选择广告位类别',
						trigger: 'change'
					}
				],
				apSysType: [
					{
						required: true,
						message: '请选择是否是系统广告',
						trigger: 'change'
					}
				],
				apStatus: [
					{
						required: true,
						message: '请选择是否启用',
						trigger: 'change'
					}
				],
				mark: [
					{
						required: true,
						message: '请选择标记电脑或手机',
						trigger: 'change'
					}
				],
				isSell: [
					{
						required: true,
						message: '请选择是否可以售卖',
						trigger: 'change'
					}
				],
				apAccUrl: [
					{
						required: true,
						message: '广告位默认图片链接不能为空',
						trigger: 'change'
					}
				],
				previewImgUrl: [
					{
						required: true,
						message: '广告位预览图片链接不能为空',
						trigger: 'change'
					}
				],
				apClickUrl: [
					{
						validator: testUrl,
						trigger: 'blur'
					}
				]
			},
			editForm: {
				apTitle: '',
				apContent: '',
				apType: '',
				apPrice: '',
				apSysType: '0',
				apStatus: '',
				apShowType: '',
				mark: '',
				apWidth: '',
				apHeight: '',
				apAccUrl: '',
				classData: this.productLastdata,
				previewImgUrl: '',
				apClickUrl: '',
				isSell: '0'
			},
			//   editRules: {
			//     apTitle: [{
			//         required: true,
			//         validator:testAccountName,
			//         trigger: "blur"
			//     }],
			//     apContent: [{
			//         required: true,
			//         validator:bannerDescribe,
			//         trigger: "blur"
			//     }],
			//     apPrice: [{
			//         required: true,
			//         message: "广告位价格不能为空",
			//         trigger: "blur"
			//     }],
			//     apWidth: [{
			//         required: true,
			//         message: "广告位宽度不能为空",
			//         trigger: "blur"
			//     }],
			//     apHeight: [{
			//         required: true,
			//         message: "广告位高度不能为空",
			//         trigger: "blur"
			//     }],
			//       apType:[{
			//           required: true,
			//           message: '请选择广告位类别',
			//           trigger: 'change'
			//       }],
			//
			// },
			productData: [],
			productLastdata: '',
			goodsClassoptions: [],
			data: [],
			form: {},
			query: {},
			loading: true,
			rolesTree: [],
			rolesKeys: [],
			srcList: [],
			box: false,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},

			option: {
				size: 'mini',
				align: 'center',
				excelBtn: false,
				tip: false,
				border: true,
				index: false,
				searchBtn: true,
				addBtn: false,
				editBtn: false,
				selection: false,
				viewBtn: false,
				delBtn: false,
				rowKey: 'id',
				// height: 'auto',
				// calcHeight: 380,
				menuWidth: 140,
				labelWidth: '160',
				searchMenuSpan: 6,
				column: [
					{
						width:280,
						label: '广告位编码',
						prop: 'apEncoding',
						addDisplay: false,
						editDisplay: false,
						fixed: true
					},
					{
						label: '广告位名',
						prop: 'apTitle',
						search: true
					},
					{
						label: '类别',
						type: 'radio',
						prop: 'apType',
						dicData:ADTYPE,
						rules: [
							{
								required: true,
								message: '请输入广告类别  img：图片，slide：幻灯',
								trigger: 'blur'
							}
						]
					},
					/*{
            label: "展示方式",
            type: "radio",
            prop: "apShowType",
            display: false,
            dicData: [
                {
                    label: "所有",
                    value: 0
                },
                {
                    label: "随机广告",
                    value: 1
                }
            ],
            rules: [{
                required: true,
                message: "请输入广告展示方式  0所有  1随机广告",
                trigger: "blur"
            }]
          },*/
					{
						label: '宽度',
						prop: 'apWidth'
					},
					{
						label: '高度',
						prop: 'apHeight'
					},
					// {
					// 	label: '价格(￥/次)',
					// 	prop: 'apPrice'
					// },
					{
						label: '标记',
						type: 'radio',
						prop: 'mark',
						dicData: [
							{
								label: '电脑',
								value: 1
							},
							{
								label: '手机',
								value: 2
							}
						],
						rules: [
							{
								required: true,
								message: '请输入标记   1电脑  2手机',
								trigger: 'blur'
							}
						]
					},
					{
						label: '广告状态',
						type: 'radio',
						prop: 'apStatus',
						dicData: [
							{
								label: '关闭',
								value: 0
							},
							{
								label: '开启',
								value: 1
							}
						],
						rules: [
							{
								required: true,
								message: '请输入广告状态  0关闭  1开启',
								trigger: 'blur'
							}
						]
					}
				]
			}
		};
	},
	computed: {
		...mapGetters(['permission', 'userInfo']),
		permissionList() {
			return {};
		}
	},
	components: {
		selFile,
		uploadPic
	},
	created() {
		getClassList().then(res => {
			if (res.data.code == 200) {
				this.goodsClassoptions = res.data.data;
			}
		});
	},
	methods: {
		setContent(type) {
			if (type == 0) {
				if (this.addForm.apWidth && this.addForm.apHeight) {
					this.content = '最佳尺寸：' + this.addForm.apWidth + 'px*' + this.addForm.apHeight + 'px';
				}
			} else {
				if (this.editForm.apWidth && this.editForm.apHeight) {
					this.content = '最佳尺寸：' + this.editForm.apWidth + 'px*' + this.editForm.apHeight + 'px';
				}
			}
		},
		//点击保存
		delBtn(row) {
			this.ladderData.splice(this.ladderData.findIndex(i => i.$index === row.$index), 1);
		},
		//点击建档
		upLadders(row) {
			this.pID = row.id;
			this.type = row.apType;
			this.ladderVisible = true;
			getLadders(row.id).then(res => {
				if (res.status == 200) {
					this.ladderData = res.data.data;
				}
			});
		},
		//设置档位确定按钮
		setGearPosition() {
			for (let item of this.probabilityArr) {
				if (item.id.indexOf('temp') != -1) {
					item.id = null;
				}
			}
			const arrn = this.ladderData;
			if (this.type == 'slide') {
				//    判断数组长度判断概率相加=100
				if (arrn.length >= 5 && arrn.length <= 10) {
					const sum = arrn.reduce((p, item) => {
						p += parseInt(item.probability);
						return p;
					}, 0);
					if (typeof sum == "number") {
						if (sum == 100) {
							const arr_new = [];
							arrn.forEach(item => {
								const obj = {};
								obj.probability = item.probability;
								obj.ladder = item.ladder;
								obj.apId = this.pID;
								arr_new.push(obj);
							});
							const arrL = arr_new.reduce((p, item) => {
								if (p.findIndex(i => i.ladder === item.ladder) === -1) {
									p.push(item);
								}
								return p;
							}, []);
							//判断概率和挡位的长度是否相同
							let probabilityArr=[]
							let ladderArr=[]
							console.log(arr_new)
							arr_new.forEach(item=>{
								probabilityArr.push(item.probability)
								if(item.ladder!=undefined){
									ladderArr.push(item.ladder)
								}
							})
							if(ladderArr.length!=probabilityArr.length){
								this.$message({
									type: 'error',
									message: '档位不能为空！'
								});
							}else if(arr_new.length != arrL.length){
								this.$message({
									type: 'error',
									message: '档位不能相等！'
								});
							}else{
								this.ladderLoad = true;
								let str = JSON.stringify(arr_new);
								setUpLadders(this.pID, str).then(res => {
									if (res.status == 200) {
										this.ladderLoad = false;
										this.ladderVisible = false;
										this.$message({
											type: 'success',
											message: '建档成功！'
										});
									}
								})
							}
						} else {
							this.$message({
								type: 'error',
								message: '概率相加需等于100请修改！'
							});
						}
					} else {
						this.$message({
							type: 'error',
							message: '请先输入内容！'
						});
					}
				} else {
					this.$message({
						type: 'error',
						message: '幻灯类型建档数据不能小于5大于10,请修改数据'
					});
				}
			} else if (this.type == 'img') {
				//    判断数组长度
				//  判断概率相加=100
				if (arrn.length >= 1 && arrn.length <= 10) {
					//概率的总和
					const sum = arrn.reduce((p, item) => {
						p += parseInt(item.probability);
						return p;
					}, 0);
					console.log(typeof sum);
					if (typeof sum == "number") {
						if (sum == 100) {
							//包装数据
							const arr_new = [];
							arrn.forEach(item => {
								const obj = {};
								obj.probability = item.probability;
								obj.ladder = item.ladder;
								obj.apId = this.pID;
								arr_new.push(obj);
							});
							//去重ladder
							const arrL = arr_new.reduce((p, item) => {
								if (p.findIndex(i => i.ladder === item.ladder) === -1) {
									p.push(item);
								}
								return p;
							}, []);
								//先判断是不是为空在判断是否相等
							let probabilityArr=[]
							let ladderArr=[]
							arr_new.forEach(item=>{
								probabilityArr.push(item.probability)
								if(item.ladder!=undefined){
									ladderArr.push(item.ladder)
								}
							})
							if(ladderArr.length!=probabilityArr.length){
								this.$message({
									type: 'error',
									message: '档位不能为空！'
								});
							}else if(arr_new.length != arrL.length){
								this.$message({
									type: 'error',
									message: '档位不能相等！'
								});
							}else{
								this.ladderLoad = true;
								let str = JSON.stringify(arr_new);
								setUpLadders(this.pID, str).then(res => {
									if (res.status == 200) {
										this.ladderLoad = false;
										this.ladderVisible = false;
										this.$message({
											type: 'success',
											message: '建档成功！'
										});
									}
								});
							}
						} else {
							this.$message({
								type: 'error',
								message: '概率相加需等于100请修改！'
							});
						}
					} else {
						this.$message({
							type: 'error',
							message: '请先输入内容！'
						});
					}
				} else {
					this.$message({
						type: 'error',
						message: '图片类型建档数据不能小于1大于10,请修改数据'
					});
				}
			}
		},
		ladderClose() {
			this.ladderVisible = false;
			this.ladderLoad = false;
		},
		//  档位
		addUpdate(form, index, done, loading) {
			console.log(this.ladderData);
			loading();
			if (form.id != undefined) {
				for (let item of this.ladderData) {
					if (item.id == form.id) {
						item.probability = form.probability;
						item.ladder = form.ladder;
					}
				}
			} /*else{
              form["id"]="temp"+new Date().getTime();
              this.ladderData.push(form)
          }*/
			done();
		},
		//  关闭新增
		closedRecurseData(formName) {
			this.dialogVisible = false;
			this.$refs[formName].resetFields();
			this.$refs[formName].clearValidate();
			this.content = '最佳尺寸：px*px';
			this.addLoad = false;
		},
		//打开新增弹框
		openDialogVisible() {
			this.dialogVisible = true;
			this.addForm = {
				apTitle: '',
				apContent: '',
				apType: '',
				apPrice: '',
				apSysType: '0',
				apStatus: '',
				mark: '',
				apWidth: '',
				apHeight: '',
				apAccUrl: '',
				previewImgUrl: '',
				apClickUrl: '',
				isSell: ''
			};
			this.editOrAdd = 0;
			this.$refs.addForm.clearValidate();
		},
		//新增弹框  点击提交按钮 判断提交成功与否的方法
		addRecurseData(addForm) {
			this.$refs[addForm].validate(valid => {
				if (valid) {
					// this.$refs[addForm].clearValidate();
					console.log(this.$refs[addForm],'----------')
					this.addLoad = true;
					this.addSuccessData();
				}
			});
		},
		addSuccessData() {
			this.addForm.apContent = encodeURIComponent(this.addForm.apContent)
			add(this.addForm).then(res => {
				if (res.data.code == 200) {
					this.addLoad = false;
					this.loading = false;
					this.$message({
						type: 'success',
						message: '新增广告位成功!'
					});
					this.onLoad(this.page);
				} else {
					this.$message({
						type: 'error',
						message: res.data.message
					});
				}
				this.content = '最佳尺寸：px*px';
			});
			this.closedRecurseData();
		},

		//打开编辑弹框
		edit(row) {
			this.editVisible = true;
			//调用根据id查询信息按钮，获取信息显示在页面上
			this.page.pageSize = 10;
			getEditDetail({ id: row.id }).then(res => {
				if (res.status == 200) {
					console.log(res.data.data);
					// this.editForm =Object.assign({}, res.data.data[0]);
					let obj = res.data.data[0];
					for (let prop in obj) {
						this.editForm[prop] = obj[prop].toString();
					}
					this.content = '最佳尺寸：' + this.editForm.apWidth + 'px*' + this.editForm.apHeight + 'px';
					console.log(this.editForm);
				}
			});
			this.editOrAdd = 1;
		},
		//编辑弹框  点击提交按钮 判断提交成功与否的方法
		editRecurseData(editFor) {
			this.$refs[editFor].validate(valid => {
				if (valid) {
					this.editLoad = true;
					this.editSuccessData();
				}
			});
		},
		// 编辑页面  保存方法
		editSuccessData() {
			this.editForm.apContent = encodeURIComponent(this.editForm.apContent)
			update(this.editForm).then(res => {
				console.log(this.editForm);
				if (res.data.code == 200) {
					this.editLoad = false;
					this.loading = false;
					this.$message({
						type: 'success',
						message: '编辑广告位成功!'
					});
					this.onLoad(this.page);
				} else {
					this.$message({
						type: 'error',
						message: res.data.message
					});
				}
				this.content = '最佳尺寸：px*px';
			});
			this.editVisible = false;
		},
		// 编辑关闭按钮
		editCloseDialog(formName) {
			this.editVisible = false;
			this.$refs[formName].resetFields();
			this.content = '最佳尺寸：px*px';
			this.editLoad = false;
		},

		// 打开选择默认图片的弹框
		apAccurlOpen(ev) {
			ev === '0' ? (this.urlClass = 0) : (this.urlClass = 1);
			this.$refs.selFile.open();
		},

		// // 打开选择预览图片的弹框
		// previewOpen(ev, editOrAdd) {
		// 	ev === '1' ? (this.urlClass = 1) : (this.urlClass = 0);
		// 	editOrAdd === '1' ? (this.editOrAdd = 1) : (this.editOrAdd = 0);
		// 	this.$refs.selFile.open();
		// },

		// 选择广告位图片
		selFileCallBack(obj) {
			if (this.editOrAdd == 0) {
				this.urlClass == 0 ? (this.addForm.apAccUrl = obj[0]) : (this.addForm.previewImgUrl = obj[0]);
			} else {
				this.urlClass == 0 ? (this.editForm.apAccUrl = obj[0]) : (this.editForm.previewImgUrl = obj[0]);
			}

		},

		//级联选择器
		handleChange(value) {
			//选择商品数据  点击触发事件
			this.productLastdata = value[value.length - 1];
		},

		rowSave(row, loading, done) {
			row.position = row.positionIds;
			row.deptName = row.$deptId;
			row.repassword = row.password;
			add(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '新增成功!'
					});
				},
				error => {
					done();
				}
			);
		},
		rowUpdate(row, index, loading, done) {
			row.position = row.positionIds;
			update(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
				},
				error => {
					done();
				}
			);
		},
		rowDel(row) {
			this.$confirm('确定将选择数据删除?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					return remove(row.id);
				})
				.then(res => {
					if (res.data.code == 200) {
						this.onLoad(this.page);
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
				});
		},
		searchReset() {
			this.query = {};
			this.onLoad(this.page);
		},
		searchChange(params, done) {
			this.query = params;
			this.page.currentPage = 1;
			this.onLoad(this.page, params, done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {}, done) {
			this.loading = true;
			getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if (done) {
					done();
				}
				this.loading = false;
				const data = res.data;
				this.page.total = data.count;
				this.data = data.data;
			});
		},

		biddingRanking(val) {
			console.log(val);
			this.innerVisible = true;
			let orderBy = 0;
			let adApId = val.id;
			getlistPoster(orderBy, adApId).then(res => {
				console.log(res);
				if (res.status == 200) {
					this.tableData = res.data.data.listMap;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.el-table__fixed-right::before, .el-table__fixed::before {
		height: 2px!important;
	}
</style>
